<template>
  <div class="container">
    <div class="head">
      <div>
        <el-button type="warning" plain @click="readMessages"  size="small">所选设为已读</el-button>
        <el-button type="danger" plain @click="deleteMessages"  size="small">删除选择的信息</el-button>
        <el-button @click="toggleSelection()" size="small">取消选择</el-button>
      </div>
      <div>
        <el-select v-model="value" placeholder="消息状态" size="small" style="width: 8rem;">
          <el-option v-for="item in options" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </div>
    </div>

    <div class="center">
      <el-table ref="multipleTable" :data="inboxsimple" tooltip-effect="light" style="width: 90%"
                @selection-change="handleSelectionChange" :current-row-key="tableIndex">
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column label="消息标题" width="400" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{opacity: (scope.row.message_status === '1' ? 0.5 : 1 )}" @click="toinboxdetail(scope.$index)" class="span">{{ scope.row.message_title }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="message_create_time" label="接收时间" width="250">
          <template slot-scope="scope">
            <span :style="{opacity: (scope.row.message_status === '1' ? 0.5 : 1 )}">
              {{ scope.row.message_create_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="message_type" label="接收类型" width="250">
          <template slot-scope="scope">
            <span :style="{opacity: (scope.row.message_status === '1' ? 0.5 : 1 )}">
              {{ messageType(scope.row.message_type) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="info" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagesize * 10"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../../api/axios";

export default {
  data() {
    return {
      // 消息类型选择
      options: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '未读'
        },
        {
          value: 2,
          label: '已读'
        }
      ],
      value: 0,
      // 消息列表
      inboxsimple: [],
      // 页码总数
      pagesize:1,
      // 当前页码
      currentPage1: 1,
      multipleSelection: [],
      tableIndex: 0,
    };
  },
  created() {
    this.getinbox();
  },
  computed: {
    // 消息类型计算方法
    messageType() {
      return function (type) {
        if (type === '0') {
          return '参加活动消息'
        }
        if (type === '1') {
          return '活动审核结果消息'
        }
        if (type === '2') {
          return '退出活动消息'
        }
      }
    }
  },
  watch: {
    value() {
      // 获取消息列表
      request({
        url: '/v1/messages/receivemessage',
        method: 'post',
        data: {
          page: this.currentPage1,
          message_type: this.value,
          user_name: this.$store.state.userInfo.userName,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.inboxsimple = res.data.data;
          this.pagesize=res.data.pageNum
        } else this.inboxsimple = [];
      });
    }
  },
  methods: {
    // 获取消息列表
    getinbox() {
      request({
        url: '/v1/messages/receivemessage',
        method: 'post',
        data: {
          page: this.currentPage1,
          message_type: this.value,
          user_name: this.$store.state.userInfo.userName,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.inboxsimple = res.data.data;
          this.pagesize=res.data.pageNum
        } else this.inboxsimple = [];
      });
    },
    // 取消选中
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    deleteUser(id){
      request({
        url: '/v1/messages/deletemessage',
        method: 'post',
        data: {
          delete_method: 0,
          id: id
        }
      }).then(res => {
        if (res.data.code === 200){
          alert('删除成功！')
          this.getinbox()
        }
      });
    },
    // 删除所选消息
    deleteMessages() {
      request({
        url: '/v1/messages/deletemessage',
        method: 'post',
        data: {
          delete_method: 2,
          ids: this.multipleSelection
        }
      }).then(res => {
        if (res.data.code === 200){
          alert('删除成功！')
          this.getinbox()
        }
      });
    },
    // 所选设为已读消息
    readMessages() {
      request({
        url: '/v1/messages/readmessage',
        method: 'post',
        data: {
          read_method: 2,
          user_name: this.$store.state.userInfo.userName,
          ids: this.multipleSelection
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.getinbox()
        }
      });
    },
    // 将选中的数组赋值给multipleSelection
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 监听页码变化
    handleCurrentChange(val) {
      this.currentPage1 = val
      request({
        url: '/v1/messages/receivemessage',
        method: 'post',
        data: {
          page: val,
          message_type: this.value,
          user_name: this.$store.state.userInfo.userName,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.inboxsimple = res.data.data;
          this.pagesize=res.data.pageNum
        } else this.inboxsimple = [];
      });
    },


    // 去message详情页
    toinboxdetail(index) {
      // 消息id
      let id = this.inboxsimple[index].id;
      // 活动id
      if (this.inboxsimple[index].message_type === '0' || this.inboxsimple[index].message_type === '2') {
        let activityId = this.inboxsimple[index].join_activity_id;
        // 获取活跃的活动体
        this.$store.dispatch('toActivityDetail', activityId)
      }
      // 获取活跃的消息体
      this.$store.dispatch('toinboxdetail', id)

      this.$router.push({
        path: '/inboxdetail'
      });
    },
  }
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
}

.head {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.span:hover {
  cursor: pointer;
  border-bottom: 0.5px solid rgb(158, 158, 158);
}
</style>
